<template>
  <div>
    <a-modal v-model:visible="visible" :title="info.name" :footer="false" width="80%">
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #field="{ record }">
          <a-input v-model="record.field" />
        </template>

        <template #name="{ record }">
          <a-input v-model="record.name"   @pressEnter="updateFieldbyKey(record, 'name')"/>
        </template>

        <template #alias_name="{ record }">
          <a-input v-model="record.alias_name" @pressEnter="updateFieldbyKey(record, 'alias_name')"/>
        </template>

        <template #front_msg="{ record }">
          <a-input v-model="record.front_msg"/>
        </template>

        <template #is_hide="{ record }">
          <a-select :model-value="record.is_hide">
            <a-option :value="0">否</a-option>
            <a-option :value="1">是</a-option>
          </a-select>
        </template>

        <template #type_list="{ record }">
          <a-textarea v-model="record.type_list"  @pressEnter="updateFieldbyKey(record, 'type_list')"/>
        </template>


        <template #operationBeforeExtend="{ record }">
          <a-link @click="openFieldRule(record)"><icon-edit /> 规则</a-link>
        </template>

      </ma-crud>
    </a-modal>

    <a-modal :visible="ruleVisible" :title="fieldInfo.name + '-规则'" @ok="handleFieldOk" @cancel="ruleVisible=false" draggable width="60%" :footer="false">
      <!-- 使用 ma-crud 组件，加入提交事件 @submit -->
      <ma-form v-model="fieldForm" :columns="fieldOptions" ref="crudFieldForm" @submit="fieldSubmit" />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/prm/activity.js'
import {Message} from "@arco-design/web-vue";

const visible = ref(false)
const ruleVisible = ref(false)
const crudFieldForm = ref()
const crudRef = ref()
const info = ref({})
const fieldInfo = ref({})


// 表单数据
const fieldForm = ref({})
// 组件的字段设置
const fieldOptions = reactive([
  {
    title: '字段规则',
    dataIndex: 'rule_desc',
    formType: 'editor',  // 默认为 input 组件
  }
]);

const fieldSubmit = async (data, done) => {
  // 显示表单提交中状态
  done(true)
  const response = await api.updateFormByField({ id:fieldInfo.value.id, value:data.rule_desc ,field:'rule_desc' })
  if (response.success) {
    Message.success(response.message)
  }
  ruleVisible.value = false;
  // 关闭表单提交中状态
  done(false)
}
const open = (record) => {
  info.value = record

  console.log(info.value.in_type)
  visible.value = true
  crudRef.value.requestData()
}

const openFieldRule = (record) => {
  fieldInfo.value = record
  ruleVisible.value = true
  fieldForm.value.rule_desc = record.rule_desc
}
const handleFieldOk = () => {
  ruleVisible.value = false
}
const updateFieldbyKey = async (record, key) => {

  const response = await api.updateFormByField({ id:record.id, value:record[key] ,field:key })
  if (response.success) {
    Message.success(response.message)
  }
}

const crud = reactive({
  autoRequest: false,
  api: api.actFormList,
  showIndex: false,
  rowSelection: {showCheckedAll: false},
  operationColumn: true,
  operationColumnWidth: 200,
  add: {show: true, api: api.actFormAdd, auth: ['prm:activity_form:save'],},
  edit: {show: true, api: api.actFormEdit, auth: ['prm:activity_form:update']},
  delete: {show: true, api: api.actFormDel, auth: ['prm:activity_form:update']},
  formOption: {viewType: 'modal', width: 800},
  beforeRequest: (params) => {
    params.act_id = info.value.id
    return true

  },
  beforeAdd: (params) => {
    params.act_id = info.value.id
    return true
  }
})

const type_list = [
    { label: '文本框', value: '0' },
    { label: '文本域', value: '1' },
    { label: '下拉框', value: '2' },
    { label: '下拉框', value: '3' },
    { label: '单选框', value: '4' },
    { label: '图片', value: '5' },
]
const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '表单名称', dataIndex: 'name'},
  {title: '表单别名', dataIndex: 'alias_name'},
  {title: '是否隐藏', dataIndex: 'is_hide',addDefaultValue: '0', formType: 'select',dict: { data: [{ label: '否', value: '0'}, { label: '是', value: '1'}], translation: true },},
  {title: '是否必填', dataIndex: 'is_empty',addDefaultValue: '1', formType: 'select',dict: { data: [{ label: '否', value: '0'}, { label: '是', value: '1'}], translation: true },},
  {title: '表单提示', dataIndex: 'front_msg'},
  {title: '表单code', dataIndex: 'field'},
  {title: '表单类型', dataIndex: 'type',formType: 'select', width: 80,
    dict: { data: type_list, translation: true },
  },
  {title: '表单选项', dataIndex: 'type_list', width: 200,},
])

defineExpose({ open })

</script>
